
<template>
	<view class="container">
		<view class="userinfo-board">
			<view class="good-night">
				晚安，好梦。
			</view>
			<view class="blessing">
				{{ blessing }}
			</view>
		</view>
		<view class="collect-board">
			<text class="title">收藏集 · 音乐 故事</text>
			<image class="image" src="../../static/images/common/collection.png" />
		</view>
		<view class="history-board">
			<text class="title">播放记录 · 最近{{ limit }}条记录</text>
			<image class="image" src="../../static/images/common/history.png" />
		</view>

		<!-- 历史记录列表 start -->
		<!-- <playlist
	    isShow="{{ showRecord }}"
	    hasTabBar="{{ true }}"
	    title="播放记录"
	    lists="{{ playRecord }}"
	    catch:click="onPlayListClick"
	    catch:close="onClick"
	  /> -->
		<!-- 历史记录列表 end -->

		<!-- 收藏集列表 start -->
		<!-- <playlist
	    mode="blend"
	    isShow="{{ showCollect }}"
	    hasTabBar="{{ true }}"
	    title="收藏集"
	    collect="{{ collect }}"
	    catch:click="onPlayListClick"
	    catch:close="onClick"
	  /> -->
		<!-- 收藏集列表 end -->
		
		
		<view class="order-status">
			<view class="status-wrap">
				
		
				<!-- 订单状态 -->
				<view class="status-list">
					<view class="status-item " @tap='firstTo(index)' hover-class="btn-hover" v-for="(item, index) in orderStatusList" :key="index">
						<view class="item-icon text-red" :class="'cuIcon-' + item.icon" ></view>
						<view class="item-text ">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		
		<view class="tabBar-board">
		  <view class="tabBar-item" @click="NavChange">
		    <view class="icon-board ">
		      <image class="icon" mode="aspectFit" :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"/>
		    </view>
		  </view>
		  <view class="tabBar-item" >
		    <view class="icon-board active" >
		      <image class="icon" mode="aspectFit" 
		        :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"/>
		    </view>
		  </view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "components",
		data() {
			return {
				PageCur:'plugin',
				blessing: 'loading...',
				limit:2,
				orderStatusList: [
					{ name: '短句', icon: 'friendfavor', status: 10 },
					{ name: 'One', icon: 'wefill', status: 30 },
					{ name: '翟翟同学', icon: 'service', status: 40 },
					{ name: '每日新闻', icon: 'like', status: 50 },
					
				],
			};
		},
		methods: {
			NavChange: function(e) {
			
				uni.navigateBack({
				    delta: 1
				});
			},
			
			firstTo(index){
				console.log(index);
				
				switch(index){
					case 0 :
					uni.navigateTo({
						url:'first/first'
					})
					break;
					case 1 :
					uni.navigateTo({
						url:'/pages/mine/second/second',
						complete(res) {
							console.log(res);
						}
					})
					break;
					case 2 :
					uniCloud
						.callFunction({
							name: 'get_One',
						})
					uni.navigateTo({
						url:'/pages/mine/three/three',
						complete(res) {
							console.log(res);
						}
					})
					break;
					case 3 :
					uni.navigateTo({
						url:'/pages/mine/four/four',
						complete(res) {
							console.log(res);
						}
					})
					break;
				}
				
			},

		},
		onLoad() {
			uniCloud.callFunction({
				name:'blessing'
			}).then(res=>{
					this.blessing=res.result.text;
			})
		}
	}
</script>


<style lang="scss">
	.container {
		background-color: #03174C;
		height: 100vh;
		position: absolute;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.userinfo-board {
		display: flex;
		flex-direction: column;
		width: 590rpx;
		margin: 205rpx 60rpx 60rpx 60rpx;
	}

	.userinfo-board .good-night {
		display: flex;
		flex-direction: row;
		width: 466rpx;
		height: 88rpx;
		font-size: 48rpx;
		color: #000;
		color: #E6E7F2;
	}

	.userinfo-board .blessing {
		height: 60rpx;
		padding-left: 5rpx;
		font-size: 26rpx;
		color: #98A1BD;
		box-sizing: border-box;
		word-wrap: break-word;
	}

	.collect-board,
	.history-board 

	{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 670rpx;
		height: 170rpx;
		margin: 45rpx;
		opacity: .9;
		.image{
			height: 100%;
		}
		
	}

	.collect-board {
		margin-top: 60rpx;
	}

	.collect-board .title,
	.history-board .title {
		position: absolute;
		top: 50rpx;
		left: 50rpx;
		z-index: 1;
		font-size: 30rpx;
	}

	.collect-board .title {
		color: #3F414E;
	}

	.history-board .title {
		color: #EBEAEC;
	}
	
	
	
	
	//新增
	.order-status {
		position: fixed;
		bottom: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 670rpx;
		height: 170rpx;
		margin: 45rpx;
		opacity: .9;
		


		.status-wrap {
			width: 100%;
			
			overflow: hidden;
			
			.status-list {
				border-radius: 20rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
				// background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #EBEAEC;
					}
					.item-text {
						font-size: 28rpx;
						color: #EBEAEC;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
</style>

